<template>
	<view class="max-box">
		<view class="title">
			<view class="title-left" @click="communityStores">
				<image src="/static/logo.png" class="title-image" mode=""></image>
				<view class="">嗨品软件-阿奇</view>
			</view>
			<view class="title-right">
				<button class="title-button">
					<u-icon name="heart" color="#fff" size="28"></u-icon>
					<view class="">关注</view>
				</button>
				<u-icon name="share" size="28"></u-icon>
			</view>
		</view>
		<view class="details-content">
			<u-swiper height="450" :list="carouselData" @change="e => currentNum = e.current" :autoplay="false"
				indicatorStyle="right: 20px" circular>
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum +1 }}/{{ carouselData.length }}</text>
				</view>
			</u-swiper>
			<view class="community-details">
				<view class="details-name">生鲜团购小程序，在线团购</view>
				<view class="details-time">2024-03-01 11:21:36</view>
			</view>
		</view>
		<view class="appraise">
			<view class="appraise-title">评价(0条)</view>
			<u-line type="info"></u-line>
			<view class="appraise-content">
				<u-empty mode="order" text="还没有人评论呢,快来抢沙发~">
				</u-empty>
			</view>
		</view>
		<view class="footer">
			<view class="footer-left">
				<u-search placeholder="发表你的想法吧" :showAction='false' searchIcon=' ' disabled
					@click="comments = true"></u-search>
				<u-popup :show="comments" :round="10" mode="bottom" @close="comments = false">
					<view>
						<view class="popup-title">
							<view class="popup-cancel" @click="comments = false">取消</view>
							<view class="popup-comments">评论</view>
							<view class="popup-confirm">确定</view>
						</view>
						<view class="popup-textField">
							<u--textarea class="text-field" v-model="textField" placeholder="请输入内容"></u--textarea>
						</view>
					</view>
				</u-popup>
			</view>
			<view class="footer-right">
				<u-icon name="heart" size="28"></u-icon>
				<view class="">0</view>
				<u-icon name="chat" size="28"></u-icon>
				<view class="">0</view><strong></strong>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图右下角页数变量
				currentNum: 0,
				// 轮播图数据
				carouselData: [
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				// 评论弹出层控制显示与隐藏
				comments: false,
				// 弹出层文本域数据
				textField: ""
			}
		},
		methods: {
			// 点击头像和名称跳转页面
			communityStores(){
				uni.navigateTo({
					url:'/pages/index/communityStores/communityStores'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.max-box {
		height: 100%;
		background-color: #F6F6F6;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
	}

	.title-left {
		display: flex;
		align-items: center;
	}

	.title-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
		margin-right: 20rpx;
	}

	.title-right {
		display: flex;
		align-items: center;
	}

	button::after {
		border: none;
	}

	button {
		padding-left: 20rpx;
		padding-right: 20rpx;
		text-align: center;
		line-height: 1.35;
		overflow: hidden;
		height: 100%;
	}

	.title-button {
		display: flex;
		align-items: center;
		background-color: #FE3A39;
		border-radius: 40rpx;
		padding: 5rpx 20rpx 5rpx 20rpx;
		color: #fff;
		margin-right: 20rpx;
	}

	.details-content {
		background-color: #fff;
	}

	// 轮播图样式
	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	// 社区详情名称样式
	.community-details {
		padding: 20rpx;
	}

	.details-name {
		font-size: 35rpx;
	}

	.details-time {
		margin-top: 10rpx;
		color: rgb(146, 146, 146);
	}

	.appraise {
		margin-top: 30rpx;
		background-color: #fff;
		padding-bottom: 40rpx;
	}

	.appraise-title {
		padding: 20rpx;
		font-size: 40rpx;
	}

	.appraise-content {
		margin-top: 20rpx;
		height: 400rpx;
	}

	.footer {
		background-color: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 20rpx;
		border-top: 2px solid #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.footer-left {
		width: 70%;
	}

	.footer-right {
		display: flex;
		align-items: center;
		padding-right: 40rpx;
	}

	.popup-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		font-size: 35rpx;
	}

	.popup-comments {
		font-weight: bold;
	}

	.popup-confirm {
		color: red;
	}

	.popup-textField {
		padding: 20rpx;
	}

	.text-field {
		background-color: #F8F8F8;
	}
	// 文本域样式
	::v-deep .u-textarea.data-v-81cd9d32 {
		border-radius: 4px;
		background-color: #fff;
		position: relative;
		display: flex;
		flex-direction: row;
		flex: 1;
		padding: 9px;
		background-color: #F8F8F8;
	}
</style>